{% extends './home/base.html' %}
{% block header %}
    <link rel="stylesheet" href="{{ url_for('static',filename='swiper/swiper-bundle.min.css') }}"/>

{% endblock %}
{% block content %}
    <div class="container">
        {#    轮播图    #}
        <div class="swiper mySwiper">
            <div class="swiper-wrapper" style="height: 300px">
                {% for item in carousel %}
                <div class="swiper-slide">
                    <img style="width: 100%"
                         src="{{ item.url }}"
                         alt="">
                </div>
                {% endfor %}
            </div>
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
            <div class="swiper-pagination"></div>
        </div>
        {#        <h3 class="bg-primary text-white p-2 mt-2">热门话题</h3>#}
        <h3 class="btn btn-outline-primary btn-block mt-2">热门话题</h3>
        <ul class="list-group list-group-flush shadow-sm alert mb-3">
            {% for item in pagination.items %}
                <li class="list-group-item clearfix">
                    <div class="float-left" onclick="location.href='/que_detail/{{ item.que_id }}'">
                        <h5>{{ item.que_title }}</h5>
                        <small class="text-primary">
                            <span>访问次数:{{ item.que_visit_count }}</span>
                            <span class="ml-2">点赞次数:{{ item.que_like_count }}</span>
                        </small>
                        <div class="mb-2 mt-2">
                            分类:
                            <span class="badge badge-secondary">{{ item.que_cat.cat_name }}</span>
                        </div>
                        <div class="mb-2 mt-2">
                            标签:
                            {% for tag in item.que_tags | parse_tag %}
                                <span class="badge badge-primary badge-pill">{{ tag }}</span>
                            {% endfor %}
                        </div>
                        <p class="text-left">{{ item.que_create_time }}</p>
                    </div>
                    <div class="float-right text-center"
                         onclick="location.href='{{ url_for('home.user',id=item.que_author.mem_id) }}'">
                        <img style="width: 100px;" class="img-thumbnail rounded-circle"
                             src="{{ item.que_author.mem_avatar }}"
                             alt="">
                        <div class="font-weight-bold">{{ item.que_author.mem_nickname }}</div>
                    </div>
                </li>
            {% endfor %}
        </ul>
        {#    分页按钮  #}
        <ul class="pagination">
            <li class="page-item disabled">
                <a class="page-link" href="#">总共{{ pagination.total }} 条数据</a>
            </li>
            <li class="page-item disabled">
                <a class="page-link" href="#">当前{{ pagination.page }}/{{ pagination.pages }}页</a>
            </li>

            <li class="page-item {% if not pagination.has_prev %}disabled{% endif %}">
                <a class="page-link" href="/?page={{ pagination.prev_num }}">上一页</a>
            </li>
            {#   运算符左右需要添加空格, 否则会有波浪线          #}
            {% for item in range(1,pagination.pages + 1) %}
                <li class="page-item {% if pagination.page==item %} active {% endif %}">
                    <a class="page-link" href="/?page={{ item }}">{{ item }}</a>
                </li>
            {% endfor %}
            <li class="page-item {% if not pagination.has_next %}disabled{% endif %}">
                <a class="page-link" href="/?page={{ pagination.next_num }}">下一页</a>
            </li>
        </ul>
    </div>
    <script src="{{ url_for('static',filename='swiper/swiper-bundle.min.js') }}"></script>
    <script>
        var swiper = new Swiper(".mySwiper", {
            loop: true,
            autoplay: {
                delay: 1000
            },
            speed: 500,
            pagination: {
                el: ".swiper-pagination",
                type: "progressbar",
            },
            navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev",
            },
        });
    </script>
{% endblock %}